<div class="op-sidebar-content">
    <div data-height-exclude class="op-search op-messages-search">
        <div class="op-search-tools form-inline">

            <ul class="form-group nav nav-pills op-actionbar op-inbox-nav"
                data-bind="visible: $root.isInboxBased() && !!visibleItem() && nextItemIndex() !== previousItemIndex()">
                <li>
                    <a href="#" data-bind="click: next, hotkeydown: { 'ctrl+down': next }, css: { disabled: nextItemIndex() === null }" class="btn">
                        <i class="mi mi-chevron-big-1-01"></i>
                    </a>
                </li>
                <li>
                    <a href="#" data-bind="click: prev, hotkeydown: { 'ctrl+up': prev }, css: { disabled: previousItemIndex() === null }" class="btn">
                        <i class="mi mi-chevron-big-2-01"></i>
                    </a>
                </li>
            </ul>

            <div class="form-group op-quicksearch">
                <label class="sr-only" for="quicksearch">Recherche rapide</label>
                <i class="fa fa-search"></i>
                <input id="quicksearch" type="text" placeholder="Recherche rapide..." class="form-control"
                       data-bind="value: quicksearch, valueUpdate: 'afterkeydown', enterKeyPressed: quickSearchCmd">
                <a href="#" data-bind="visible: quicksearch(), click: resetQuickSearch">
                    <i class="fa fa-times-circle"></i>
                </a>
            </div>

            <div class="checkbox" data-bind="visible: $root.isInboxBased()">
                <label for="mymessagesonly">
                    <input type="checkbox" id="mymessagesonly" data-bind="checked: $root.searchInboxOnly">
                    dans mes messages seulement</label>
            </div>
            <ul class="form-group nav nav-pills op-actionbar">
                <li data-bind="css: { 'active': isAdvancedVisible }">
                    <a href="#" data-bind="click: $root.togglePanel.bind($root, 'advanced')">
                        <span class="visible-lg"><i class="mi mi-files-41"></i> Recherche avancée</span>
                        <span class="hidden-lg"><i class="mi mi-files-41"></i></span>
                    </a></li>
                <li data-bind="css: { 'active': isFiltersVisible }">
                    <a href="#" data-bind="click: $root.togglePanel.bind($root, 'filters')">
                        <span class="visible-lg"><i class="mi mi-content-47"></i> Filtres</span>
                        <span class="hidden-lg"><i class="mi mi-content-47"></i></span>
                    </a></li>
                <li class="hidein-message-details" data-bind="css: { 'active': isActionsVisible }">
                    <a href="#" data-bind="click: $root.togglePanel.bind($root, 'actions')">
                        <span class="visible-lg"><i class="mi mi-setting-8"></i> Actions groupées</span>
                        <span class="hidden-lg"><i class="mi mi-setting-8"></i></span>
                    </a></li>
                <li>
                    <a href="#" data-bind="click: $root.exportExcel.bind($root)">
                        <span class="visible-lg"><i class="mi mi-programing-60"></i> Export Excel</span>
                        <span class="hidden-lg"><i class="mi mi-programing-60"></i></span>
                    </a>
                </li>

                <li data-bind="visible: $root.isInboxBased() && !isActionsVisible() && $root.currentMenu().estMasse"><a href="#" data-bind="click: $root.piocher"><i
                        class="mi mi-files-74"></i>
                    Piocher</a></li>
                <li data-bind="visible: $root.isInboxBased() && !isActionsVisible() && $root.currentMenu().estMasse"><a href="#" data-bind="click: $root.redeposer"><i
                        class="mi mi-files-73"></i>
                    Redéposer ma pioche</a></li>
            </ul>
            <!-- ko compose: { view: config.actionBar } --><!-- /ko -->
            <div class="op-list-counter pull-right" data-bind="visible: totalItemCount() >= 0 && totalItemCount() != null">
                <span data-bind="text: totalItemCount()">0</span>
                résultat<span data-bind="visible: totalItemCount() > 1">s</span>
            </div>
        </div>
        <div class="op-search-params" data-bind="visible: currentVisiblePanel() != ''">

            <div data-bind="visible: isAdvancedVisible()">
                <div class="search-advanced container-fluid">
                    <!-- ko compose: config.advancedSearch.template -->
                    <!-- /ko -->
                    <div class="op-search-controls">
                        <button class="btn btn-primary" data-bind="enable: $root.asErrors().length === 0, click: $root.advancedSearchCmd">
                            Rechercher
                        </button>
                        <span data-bind="visible: totalItemCount() >= 0 && totalItemCount() != null">
                            <a href="#" data-bind="click: $root.resetSearch"><i class="mi mi-edition-41"></i> Réinitialiser la recherche</a>
                        </span>
                        <span data-bind="visible: $root.asErrors().length > 0"><i class="mi mi-interface-54"></i> Formulaire de recherche invalide</span>
                    </div>
                </div>
            </div>

            <div data-bind="visible: isFiltersVisible">
                <div class="row op-filters">
                    <div class="col-md-36">
                        <select class="form-control"
                                data-bind="options: config.filters, optionsCaption: '---'"></select>
                    </div>

                    <div class="col-md-12">
                        <label for="mymessagesonly_filters" data-bind="visible: $root.config.hasInbox">
                            <input type="checkbox" id="mymessagesonly_filters"
                                   data-bind="checked: $root.searchInboxOnly">
                            dans mes messages seulement</label>

                    </div>
                </div>
                <div class="op-search-controls">
                    <button class="btn btn-primary">Rechercher</button>
                </div>
            </div>

            <div data-bind="visible: isActionsVisible" class="op-actions">
                <ul class="nav nav-pills" data-bind="foreach: actions">
                    <li>
                        <a href="#" data-bind="click: doAction.bind($root)">
                            <i data-bind="attr: { class: icon }"></i> <span data-bind="text: name"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div data-bind="visible: config.displayType, compose: { view: config.displayType.container, cacheViews: true }"></div>
</div>